<template>
  <diy-container
    :status="pageStatus"
    :border-bottom="false"
    :color="pageDetail.color"
    ref="container"
    :title="pageDetail.title"
    :headerVisable="true"
    :headerBackGroudColor="pageDetail.backgroundColor"
    :headerBackgroundImage="pageDetail.backgroundImage"
    :tabbarIsShow="false"
    :isShowLeft="true"
  >
    <view class="content-list">
      <view class="upload">
        <view class="text">头像：</view>
        <view class="up">
          <image
            v-if="user.imgUserDesignUrl"
            :src="user.imgUserDesignUrl"
            mode="aspectFill"
            @click="val => chooseImage()"
          ></image>
          <view @click="val => chooseImage()" v-if="!user.imgUserDesignUrl">
            <image src="../../static/images/schuan.png" mode=""></image>
          </view>
        </view>
      </view>

      <view class="item">
        <view class="title">出生日期：</view>
        <view class="value" @click="getstatus()">
          <text class="text">{{ user.time }}</text>
          <text class="icon iconfont icon-xiangxi"></text>
        </view>
      </view>
      <u-datetime-picker
        :show="show"
        v-model="value1"
        mode="date"
        @confirm="gecole"
        @cancel="getbtn()"
        @change="changes()"
      ></u-datetime-picker>

      <view class="current-residence">
        <view class="label">出生地址：</view>
        <view class="area">
          <view class="text">{{ user.area.name }}</view>
          <u-icon name="arrow-right" size="13" @click="areaSelect"></u-icon>
        </view>
      </view>
      <view class="current-residence">
        <view class="label">工作地区：</view>
        <view class="area">
          <view class="text">{{ user.census.name }}</view>
          <u-icon name="arrow-right" size="13" @click="areaSelect2"></u-icon>
        </view>
      </view>
      <view class="marker">
        <view class="text">学历：</view>
        <uni-data-select
          placeholder="请选择"
          v-model="user.specIsRope"
          :localdata="rope"
          @change="change()"
        ></uni-data-select>
      </view>
      <view class="marker">
        <view class="text">婚姻状态：</view>
        <uni-data-select
          placeholder="请选择"
          v-model="user.status"
          :localdata="status"
          @change="change()"
        ></uni-data-select>
      </view>

      <view class="marker">
        <view class="text">职业：</view>
        <uni-data-select placeholder="请选择" v-model="user.job" :localdata="job" @change="change()"></uni-data-select>
      </view>

      <view class="marker">
        <view class="text">月收入：</view>
        <uni-data-select
          placeholder="请选择"
          v-model="user.money"
          :localdata="money"
          @change="change()"
        ></uni-data-select>
      </view>

      <view class="marker">
        <view class="text">购车情况：</view>
        <uni-data-select placeholder="请选择" v-model="user.car" :localdata="car" @change="change()"></uni-data-select>
      </view>
      <view class="tagging">
        <view class="title">身高：</view>
        <input type="digit" v-model="user.height" class="wz-input" placeholder="请输入身高" />
      </view>
      <view class="tagging">
        <view class="title">体重(kg)：</view>
        <input type="digit" v-model="user.specTotalLenth" class="wz-input" placeholder="请输入体重" />
      </view>
      <view class="tagging">
        <view class="title">微信号：</view>
        <input type="digit" v-model="user.wexin" class="wz-input" placeholder="请输入微信号" />
      </view>
    </view>
    <view class="config">
      <view class="btn" @click="getSave()">下一步</view>
    </view>

    <UrbanAreas ref="urbanAreasRef1" @localConfirm="localConfirm"></UrbanAreas>
    <UrbanAreas ref="urbanAreasRef2" @localConfirm="localConfirm2"></UrbanAreas>
  </diy-container>
</template>

<script>
import UrbanAreas from "../../components/urban-areas/urban-areas.vue";
export default {
  components: {
    UrbanAreas
  },
  data() {
    return {
      pageDetail: {
        title: "详细信息",
        backgroundColor: "#ffffff",
        color: "rgb(51, 51, 51)",
        backgroundImage: ""
      },
      user: {
        imgUserDesignUrl: "",
        specIsRope: "",
        specTotalLenth: "",
        height: "",
        status: "",
        money: "",
        car: "",
        house: "",
        job: "",
        wexin: "",
        time: "请选择时间",
        area: {
          code: "0",
          name: "请选择地址"
        },
        census: {
          code: "0",
          name: "请选择地址"
        }
      },
      show: false,
      value1: Number(new Date()),
      rope: [
        { value: 0, text: "中专" },
        { value: 1, text: "高中" },
        { value: 2, text: "专科" },
        { value: 3, text: "本科" },
        { value: 4, text: "硕士" },
        { value: 5, text: "博士" }
      ],
      status: [
        { value: 0, text: "未婚" },
        { value: 1, text: "离异未育" },
        { value: 2, text: "离异带孩" },
        { value: 3, text: "离异孩跟对方" },
        { value: 4, text: "丧偶" }
      ],
      money: [
        { value: 0, text: "3千以下" },
        { value: 1, text: "3千~5千" },
        { value: 2, text: "5千~8千" },
        { value: 3, text: "8千~1.2万" },
        { value: 4, text: "2万~5万" },
        { value: 5, text: "5万以上" }
      ],
      car: [
        { value: 0, text: "已买车" },
        { value: 1, text: "未买车" },
        { value: 2, text: "婚后购置" }
      ],
      house: [
        { value: 0, text: "和家人同住" },
        { value: 1, text: "已购房" },
        { value: 2, text: "租房" },
        { value: 3, text: "婚后购房" },
        { value: 4, text: "住在单位宿舍" }
      ],
      job: [
        { value: 0, text: "销售" },
        { value: 1, text: "公务员" },
        { value: 2, text: "国企职员" },
        { value: 3, text: "工程师" },
        { value: 4, text: "银行职员" },
        { value: 5, text: "个体户" },
        { value: 6, text: "老板创业者" },
        { value: 7, text: "公司职员" },
        { value: 8, text: "公司高管" },
        { value: 9, text: "律师" },
        { value: 10, text: "设计师" },
        { value: 11, text: "IT从业者" },
        { value: 12, text: "客服" },
        { value: 13, text: "人事" },
        { value: 14, text: "财务会记" },
        { value: 15, text: "军人" },
        { value: 16, text: "服务业" },
        { value: 17, text: "教师" },
        { value: 18, text: "医生" },
        { value: 19, text: "护士" },
        { value: 20, text: "警察" },
        { value: 21, text: "其他" }
      ]
    };
  },
  onLoad() {
    this.getDiamondData();
  },
  methods: {
    getDiamondData() {
      this.showPageContent();
    },
    changes(e) {
      console.log(e);
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        type: "image",
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: res => {
          this.user.imgUserDesignUrl = res.tempFilePaths[0];
        }
      });
    },
    getSave() {
      uni.navigateTo({
        url: "/pages/information/target"
      });
    },
    getstatus() {
      this.show = true;
    },
    gecole(e) {
      console.log("value", e.value);
      this.user.time = e.value;
      this.show = false;
    },
    getbtn() {
      this.show = false;
    },
    areaSelect() {
      this.$refs.urbanAreasRef1.init();
    },
    areaSelect2() {
      this.$refs.urbanAreasRef2.init();
    },
    localConfirm(e) {
      //显而易见 不多赘述
      this.user.area.name = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`;
      this.user.area.code = `${e.value[0].code}-${e.value[1].code}-${e.value[2].code}`;
      this.$refs.urbanAreasRef1.hide();
    },
    localConfirm2(e) {
      this.user.census.name = `${e.value[0].name}-${e.value[1].name}-${e.value[2].name}`;
      this.user.census.code = `${e.value[0].code}-${e.value[1].code}-${e.value[2].code}`;
      this.$refs.urbanAreasRef2.hide();
    },
    change(e) {
      // console.log(e)
    }
  }
};
</script>

<style lang="scss">
.content-list {
  background-image: url("../../static/images/icon_sys_site_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 100%;
  padding: 0 20px;
  // 上传图片
  .upload {
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    .text {
      width: 128rpx;
      text-align: right;
      font-size: 26rpx;
      color: #333;
      display: flex;
      color: #333;
      align-items: center;
    }
    .up {
      display: flex;
      image {
        width: 128rpx;
        height: 128rpx;
        border-radius: 50%;
      }
    }
  }
  .item {
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #ededed;
    .value {
      color: #666;
      .icon {
        font-size: 22rpx;
        margin-left: 20rpx;
      }
    }
  }
  .marker {
    display: flex;
    border-bottom: 1rpx solid #ededed;
    .text {
      line-height: 90rpx;
      font-size: 28rpx;
      color: #333;
      width: 200rpx;
      text-align: left;
    }
  }
  /deep/.uni-select {
    border-radius: 0;
    border: none;
    width: 520rpx;
    font-size: 30rpx;
    height: 90rpx;
    text-align: right;
    .uni-select__input-text {
      padding-right: 20rpx;
      color: #666;
      font-size: 28rpx;
    }
    .uni-select__input-placeholder {
      font-size: 28rpx;
      color: #666;
      padding-right: 20rpx;
    }
  }
  .current-residence {
    display: flex;
    justify-content: space-between;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #ededed;
    .label {
      font-size: 28rpx;
      color: #333;
    }
    .area {
      display: flex;
      align-items: center;
      .text {
        margin-right: 20rpx;
        font-size: 28rpx;
        color: #666;
      }
    }
  }
  .tagging {
    display: flex;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #ededed;
    .title {
      font-size: 28rpx;
      color: #333;
      width: 200rpx;
      text-align: left;
    }
    .wz-input {
      width: 552rpx;
      // height: 80rpx;
      font-size: 28rpx;
      color: #666;
      padding: 0 20rpx;
      text-align: right;
    }
  }
}
.config {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 150rpx;
  background: #ffffff;
  .btn {
    width: 678rpx;
    height: 80rpx;
    background: linear-gradient(94deg, #ed4733 0%, #f46132 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
    margin: 24rpx 0 0 36rpx;
  }
}
</style>
